// 1.清空之前的定时器
// 2.开始定时器
// 3.定义一个标记默认为true
// 4.遍历json,
// 5. 获取位置,目标位置
// 6. 计算 步长
// 7. 新的位置=当前位置+步长
// 8.清空定时器 
// $.animate(obj,{},callback)  json  {}






const $ = (function () {
    //1.获取样式 对象有这个属性有这个方法
    const getStyle = (obj, attr) => {
        if (window.getComputedStyle) {
            return window.getComputedStyle(obj, null)[attr];//(obj 空)[属性] 
        }
        return obj.currentStyle[attr];//ie678
    }
    

    const animate = (oEle, json, callback) => {

        clearInterval(oEle.timer);
        oEle.timer = setInterval(function () {
            let flag = true;
            for (var attr in json) {
                let current = 0;
                let target = 0;
                let step = 0;
                if (attr === "opacity") {//因为是透明度0~1放大100倍 if判断"==和==="一定不要错
                    current = parseFloat(getStyle(oEle, attr)) * 100;
                    target = parseFloat(json[attr]) * 100;
                } else {               //如 位置长宽层级都放这里
                    current = parseInt(getStyle(oEle, attr));
                    target = parseInt(json[attr]);
                }
                step = (target - current) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);

                if (attr === "opacity") { //又是因为透明度,要除回来
                    oEle.style.opacity = (current + step) / 100;
                    oEle.style.filter = "alpha(opacity=" + (current + step) + ")";//ie
                } else if (attr === "zIndex") { //层级
                    oEle.style.zIndex = target;
                } else {
                    oEle.style[attr] = (current + step) + "px"
                }

                if (target != current) { //是否达到目的,达到了下面则清除定时器
                    flag = false;
                }
            }
            if (flag) {
                clearInterval(oEle.timer);              //清除定时器
                if (typeof (callback) === "function") { //传入第三个参数是否是函数,是则调用
                    callback();
                }
            }
        },50)
    }

    return { getStyle, animate }

})()
// const $ = (function () {
// 	const getStyle = (obj, attr) => {
// 		if (window.getComputedStyle) {
// 			return window.getComputedStyle(obj, null)[attr]
// 		}
// 		return obj.currentStyle[attr];
// 	}

// 	const animate = (oEle, json, callback) => {
// 		//1.清空之前的定时器
// 		clearInterval(oEle.timer);
// 		//2.开始定时器
// 		oEle.timer = setInterval(function () {
// 			//3.定义一个标记默认为true
// 			let flag = true;
// 			//4.遍历json,
// 			for (var attr in json) {
// 				let current = 0;//当前的值
// 				let target = 0; //目标值
// 				let step = 0;   // 步长
// 				//5. 获取位置,目标位置
// 				if (attr === "opacity") { //放大100
// 					current = parseFloat(getStyle(oEle, attr)) * 100;
// 					target = parseFloat(json[attr]) * 100
// 				} else {
// 					current = parseInt(getStyle(oEle, attr))
// 					target = parseInt(json[attr])
// 				}
// 				//6. 计算 步长
// 				step = (target - current) / 10;
// 				step = step > 0 ? Math.ceil(step) : Math.floor(step);
// 				//7. 新的位置=当前位置+步长
// 				if (attr === "opacity") {
// 					oEle.style.opacity = (current + step) / 100;
// 					// ie 6 7 8透明?
// 					oEle.style.filter = "alpha(opacity=" + (current + step) + ")"
// 				} else if (attr === "zIndex") {
// 					oEle.style.zIndex = target;

// 				} else {
// 					oEle.style[attr] = (current + step) + "px"
// 				}
// 				if (target != current) {
// 					flag = false;
// 				}
// 			}
// 			if (flag) {
// 				//8.清空定时器 
// 				clearInterval(oEle.timer);
// 				if (typeof (callback) === "function") {
// 					callback();//执行
// 				}
// 			}
// 		}, 10)
// 	}
// 	return {
// 		animate
// 	}
// })()
